<template>
  <el-form ref="formRef" :model="modelForm" :rules="rules" :label-width="labelWidth" :inline="inline">
    <template v-for="(item, index) in formConfig">
      <el-form-item v-if="!(item.hidden && item.hidden(modelForm))" :key="index" :label="item.label" :style="item.style" :prop="item.prop" :class="item.class" :required="item.required">
        <template v-if="item.render">
          <component :is="item.render(modelForm)"></component>
        </template>
        <template v-if="item.type == 'text' || !item.type">
          {{ modelForm[item.prop] }}
        </template>
        <template v-if="item.type == 'input'">
          <el-input v-model.trim="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled && item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'input-number'">
          <el-input-number v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled && item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'select'">
          <cu-select v-model="modelForm" :config="item" @resetFields="resetFields()"></cu-select>
          <!-- <el-select v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled&&item.disabled(modelForm)" @change="item.onChange&&item.onChange(modelForm)">
              <el-option
                v-for="selectTtem in item.options"
                :key="selectTtem.value"
                :label="selectTtem.label"
                :value="selectTtem.value"
                :disabled="selectTtem.disabled"
              />
            </el-select> -->
        </template>
        <!-- <template v-if="item.type == 'tree'">
          <el-tree-select
            v-model="modelForm[item.prop]"
            :data="item.options"
            :props="treeProps"
            :render-after-expand="false"
          ></el-tree-select>
        </template> -->

        <template v-if="item.type == 'switch'">
          <el-switch v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled && item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'checkbox-group'">
          <el-checkbox-group v-model="modelForm[item.prop]" v-bind="item.setting">
            <el-checkbox v-for="(checkItem, checkIndex) in item.options" :key="checkIndex" :value="checkItem.value">{{ checkItem.label }}</el-checkbox>
          </el-checkbox-group>
        </template>
        <template v-if="item.type == 'checkbox'">
          <el-checkbox v-model="modelForm[item.prop]" v-bind="item.setting" :disabled="item.disabled && item.disabled(modelForm)" />
        </template>
        <template v-if="item.type == 'radio-group'">
          <el-radio-group v-model="modelForm[item.prop]" v-bind="item.setting">
            <el-radio v-for="(radioItem, radioIndex) in item.options" :key="radioIndex" :value="radioItem.value">{{ radioItem.label }}</el-radio>
          </el-radio-group>
        </template>
        <template v-if="item.type == 'slot'">
          <slot :name="item.prop"></slot>
        </template>
        <template v-if="item.type == 'button'">
          <el-button v-bind="item.setting" :disabled="item.disabled && item.disabled(modelForm)" @click="item.onClick && item.onClick(modelForm)">{{ item.name }}</el-button>
        </template>
        <!-- <template v-if="item.type == 'picker'">
          <el-date-picker
            v-model="modelForm[item.prop]"
            v-bind="item.setting"
          ></el-date-picker>
        </template> -->
        <template v-if="item.type == 'time-picker'">
          <el-time-picker v-model="modelForm[item.prop]" v-bind="item.setting"></el-time-picker>
        </template>
        <template v-if="item.type == 'date-picker'">
          <el-date-picker v-model="modelForm[item.prop]" v-bind="item.setting"></el-date-picker>
        </template>
      </el-form-item>
    </template>
  </el-form>
</template>
<script setup>
// import { config } from "@fortawesome/fontawesome-svg-core";
import { onMounted, ref, computed } from 'vue'
const formRef = ref()
const modelForm = defineModel()
const props = defineProps({
  inline: {
    type: Boolean,
    default: false
  },
  labelWidth: {
    type: String,
    default: 'auto'
  },
  formRules: {
    type: Object,
    default: null
  },
  formConfig: {
    type: Object,
    default: [
      {
        model: String,
        type: String,
        label: String,
        prop: String,
        setting: {
          size: String,
          placeholder: String,
          class: String,
          style: String,
          disabled: Boolean
        },
        options: [
          {
            label: String,
            value: String
          }
        ]
      }
    ]
  }
})
const rules = computed(() => {
  if (props.formRules) {
    return props.formRules
  } else {
    let rules = {}
    props.formConfig.forEach(item => {
      if (item.required) {
        rules[item.prop] = [
          {
            required: true,
            message: item.label + '不能为空！',
            trigger: item.type == 'select' ? 'change' : 'blur'
          }
        ]
      }
    })
    return rules
  }
})

const validate = callback => {
  formRef.value.validate(valid => {
    callback(valid)
  })
}
const resetFields = () => {
  formRef.value.resetFields()
}

onMounted(() => {
  // props.formConfig.forEach(item => {
  //   if (item.type == 'select' && item.setting?.remote && item.setting?.remoteMethod) {
  //     item.setting?.remoteMethod(modelForm.value).then(options => {
  //       item.options = options
  //     })
  //   }
  // });
})

defineExpose({ formRef, validate, resetFields })
</script>
